<template>
    <div class="block">
        <el-row>
            <el-col :span="24" class="qryform">
                <stockSelComp label="股票搜索" size="mini" v-model="code" ref="stockSel"></stockSelComp>
                <exDate v-model="curDate" label="日期" size="mini"></exDate>
                <exSelect v-model="type" label="类型" :dictList="typeList" size="mini" elstyle="width:100px"></exSelect>
                <exInput v-model="remark" label="备注" size="mini"></exInput>
                <el-button type="primary" @click="add" size="mini" style="height:28px;margin-top:4px">添加</el-button>
                <el-button type="primary" @click="query" size="mini" style="height:28px;margin-top:4px">更新数据</el-button>
                <el-button type="warning" @click="saveConfig" size="mini" style="height:28px;margin-top:4px">保存列表</el-button>
            </el-col>
        </el-row>
        <exPubTable ref="newTable" :cfg.sync="trackcfg" :exData="trackList">
            <exColumn label="名称" width="100">
                <template slot-scope="s">
                    <klinePic :code="s.row.f12" :name="s.row.f14" :markList="[s.row.record_date]"></klinePic>
                </template>
            </exColumn>
        </exPubTable>
    </div>
</template>


<script>
import dayjs from '~/plugins/day';
import stockSelComp from "@/components/stock/stockSelComp"
import klinePic from "../trade/comp/klinePic"

export default {
    components:{
        stockSelComp,
        klinePic
    },
    data() {
        var that =this;
        var typeList = [
            {name:"买入",value:1},
            {name:"关注",value:2},
        ]
        return {
            code: "",
            remark : '',
            type: "",
            typeList: typeList,
            curDate : this.$dayjs().format("YYYY-MM-DD"),
            cfg:{},
            trackList : [],
            trackcfg:{
                usePage:false,
                showIndex: true,
                canModify: true,
                btns:[
                    {name:"比对",handle:({row})=>{
                        this.addComp(row);
                    }},
                    {name:"删除",handle:({row,$index})=>{
                        this.delRecord(row,$index);
                    }}
                ],
                columns2: [
                    {prop:"f12",label:"代码",width:80,sortable:true},
                    // {prop:"f14",label:"名称",width:100,sortable:true},
                    {prop:"record_date",label:"采集时间",width:100,sortable:true},
                    {prop:"remark",label:"备注",width:130,sortable:true,edittype:"input"},
                    {prop:"type",label:"类型",width:90,sortable:true,dictList:typeList,edittype:"select"},
                    {prop:"price",label:"录入价格",width:80,align:"right"},
                    {prop:"lastprice",label:"最新",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.lastprice)}},
                    {prop:"maxprice",label:"最高",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.maxprice)}},
                    {prop:"minprice",label:"最低",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.minprice)}},
                    {prop:"day1",label:"1日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day1)}},
                    {prop:"day5",label:"5日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day5)}},
                    {prop:"day10",label:"10日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day10)}},
                    {prop:"day20",label:"20日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day20)}},
                    {prop:"day30",label:"30日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day30)}},
                    {prop:"day60",label:"60日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day60)}},
                    {prop:"day90",label:"90日",width:80,sortable:true,align:"right",formatter:this.rateFormat2,getColor(s){return that.getRateColor(s.row.day90)}}
                ],
            }
        }
    },
     

    mounted() {
        this.reLoad();
    },

    methods: {
        add(){
            var info = this.$refs.stockSel.getPlayerInfo();
            if(!info.code) return;
            this.trackList.splice(0,0,{
                f12: info.code,
                f14: info.name,
                record_date : this.curDate,
                remark: this.remark,
                type: this.type,
            })
        },
        delRecord(row,idx){
            this.trackList.splice(idx,1)
        },
        query(){
            this.trackList.map((item)=>{
                this.getKLineInfo(item)
            })
        },
        getKLineInfo(item){
            var code = item.f12;
            // if(code!="300898") return;
            var first = code.substring(0,1);
            if(code=="000001"){
                code= "1."+code;
            }else if(first=="0" || first=="3" || first=="1"){
                code = "0."+code;
            }else {
                code = "1."+code;
            }
            this.$axios.get(`http://push2his.eastmoney.com/api/qt/stock/kline/get?secid=${code}&fields1=f1%2Cf2%2Cf3%2Cf4%2Cf5%2Cf6&fields2=f51%2Cf52%2Cf53%2Cf54%2Cf55%2Cf56%2Cf57%2Cf58%2Cf59%2Cf60%2Cf61&ut=7eea3edcaed734bea9cbfc24409ed989&klt=101&fqt=1&beg=0&end=20500000`)
            .then((res) => {
                if (res.data.data) {
                    this.dataInfo=[];
                    var data = res.data.data;
                    var len = data.klines.length;
                    // var recordIdx = data.klines.findIndex((row)=>{return row.startsWith(item.record_date)});
                    // var recordIdx = data.klines.findIndex((row)=>{return row.startsWith("2021-03-03")});
                    var recordIdx = data.klines.findIndex((row)=>{return row.substring(0,10)>item.record_date});
                    recordIdx = recordIdx-1;
                    if(recordIdx<=-1) return;
                    var tmplist = data.klines.splice(recordIdx,len-recordIdx);
                    var list = [];
                    var maxprice = 0;
                    var minprice = 10000;
                    tmplist.map((rowstr,idx)=>{
                        var arr = rowstr.split(",");
                        var row = [];
                        row.push(arr[0]);//日期
                        row.push(arr[1]*1);//开
                        row.push(arr[2]*1);//收
                        row.push(arr[3]*1);//高
                        row.push(arr[4]*1);//低
                        row.push(arr[6]*1);//金额
                        row.push(arr[7]*1);//振幅
                        row.push(arr[8]*1);//涨跌幅
                        row.push(arr[9]*1);//涨跌额
                        row.push(arr[10]*1);//换手
                        list.push(row);
                        if(idx==0) return;
                        if(maxprice<row[3]) maxprice = row[3];
                        if(minprice>row[4]) minprice = row[4];
                    })
                    item.price = list[0][2];
                    item.lastprice = list[list.length-1][2];
                    item.maxprice = maxprice;
                    item.minprice = minprice;
                    item.day1 = list[1]? list[1][2]: 0;
                    item.day5 = list[5]? list[5][2]: 0;
                    item.day10 = list[10]? list[10][2]: 0;
                    item.day20 = list[20]? list[20][2]: 0;
                    item.day30 = list[30]? list[30][2]: 0;
                    item.day60 = list[60]? list[60][2]: 0;
                    item.day90 = list[90]? list[90][2]: 0;

                    if(item.lastprice) item.lastprice = this.getRise(item.lastprice,item.price)
                    if(item.maxprice) item.maxprice = this.getRise(item.maxprice,item.price)
                    if(item.minprice) item.minprice = this.getRise(item.minprice,item.price)
                    if(item.day1) item.day1 = this.getRise(item.day1,item.price)
                    if(item.day5) item.day5 = this.getRise(item.day5,item.price)
                    if(item.day10) item.day10 = this.getRise(item.day10,item.price)
                    if(item.day20) item.day20 = this.getRise(item.day20,item.price)
                    if(item.day30) item.day30 = this.getRise(item.day30,item.price)
                    if(item.day60) item.day60 = this.getRise(item.day60,item.price)
                    if(item.day90) item.day90 = this.getRise(item.day90,item.price)

                    // this.$message.info(`step1:${item.step1}->step2:${item.step2}`)
                    clearTimeout(this.updateTime)
                    this.updateTime = setTimeout(()=>{
                        this.trackList.push({});
                        this.trackList.pop();
                    },500)
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        addComp(item){
            window.$vue.addCompItem({code:item.f12,name:item.f14});
        },
        saveConfig(){
            this.$confirm('确认要保存记录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var that = this;
                var list = [];
                this.trackList.map(item=>{
                    var tmp = {
                        f12: item.f12,
                        f14: item.f14,
                        record_date : item.record_date,
                        remark: item.remark,
                        type: item.type
                    }
                    list.push(tmp);
                })
                list.sort((a,b)=>{
                    if(a.record_date>b.record_date) return -1;
                    if(a.record_date<b.record_date) return 1;
                    else return 0;
                })
                this.cfg.trackList = list;
                this.registerListen(this,"saveConfig",(err)=>{
                    try{
                        if(err){
                            that.$message.error("配置保存异常:"+err)
                        }else{
                            that.$message.success("保存成功")
                        }
                    }catch(ex){
                            that.$message.error("配置保存异常:"+err)
                    }
                });
                
                electron.ipcRenderer.send("saveConfig",this.cfg)
            });
        },
        reLoad(){
            var that = this;
            if(!window.electron){
                that.isLoad = true;
                return;
            }
            this.registerListen(this,"setConfig",(cfg)=>{
                try{
                    // console.info("loadCfg:" ,cfg)
                    Object.assign(that.cfg, cfg);
                    that.trackList = that.cfg.trackList || [];
                    that.isLoad = true;
                    that.query()
                }catch(ex){
                    that.$message.error("配置加载异常:"+ex.message)
                }
            });
            electron.ipcRenderer.send("getConfig","")

        },
    }
}
</script>

<style lang="less" scoped>
.flexdiv {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    button{
        margin-left: 10px;
    }
}

.qryform{
    margin-bottom:10px;
    button{
        margin-top:0px;
        vertical-align: middle;
    }
}
.order-class{
    display: inline-block;
    margin-right: 10px;
    min-width: 50px;
}

.red{
    color: red;
}
.green{
    color: green;
}
.yellow{
    color: rgb(96, 22, 233)
}
.link-item{
    font-size: 12px;
}

</style>
